<template>
    <div id="root">
        <div class="todo-container">
            <div class="todo-wrap">
           <UserHeader :addTodo="addTodo"/>
           
           <UserList :todos="todos" :revamp="revamp" :del="del"/>
           
           <UserFooter :todos="todos" :todoCheckAll="todoCheckAll" :delTodoDeon="delTodoDeon"/>
            </div>
        </div>
    </div>
</template>

<script>
// 引入 Header
import UserHeader from './components/UserHeader.vue'
// 引入 List
import UserList from './components/UserList.vue'
// 引入 Footer
import UserFooter from './components/UserFooter.vue'

export default {
    name:'App',
    data(){
        return {
            todos:[
                {id:'001',title:'抽烟',done:true},
                {id:'002',title:'喝酒',done:false},
                {id:'003',title:'开车',done:true}
            ]
        }
    },
    methods:{
        // 添加
        addTodo(t){
            // 子组件调用方法传入对象，添加数值，重新解析模板
            this.todos.unshift(t)
        },
        // 取消or选中
        revamp(id){
            this.todos.forEach(todo => {
                if(todo.id === id)  todo.done = !todo.done
            });
        },
        // 删除
        del(id){
            // 方式一：
            // this.todos.forEach((todo,index) =>{
            //     if(todo.id===id) this.todos.splice(index,1)
            // })
            // 方式二：
            this.todos =  this.todos.filter(todo=>{
                return todo.id !== id 
            })
        },
        // 全选or取消全选
        todoCheckAll(done){
            this.todos.forEach(todo=>{
                todo.done = done
            })
        },
        // 清除已完成
        delTodoDeon(){
            // 过滤调所有的已完成
            this.todos =  this.todos.filter(todo=> !todo.done)
        }
    },
    // 注册组件
    components:{
        UserHeader,
        UserList,
        UserFooter,
    }, 
    
}
</script> 

<style>
    /*base*/
    body {
    background: #fff;
    }
    .btn {
        display: inline-block;
        padding: 4px 12px;
        margin-bottom: 0;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
    }
    .btn-danger {
        color: #fff;
        background-color: #da4f49;
        border: 1px solid #bd362f;
    }
    .btn-danger:hover {
        color: #fff;
        background-color: #bd362f;
    }
    .btn:focus {
        outline: none;
    }
    .todo-container {
        width: 600px;
        margin: 0 auto;
    }
    .todo-container .todo-wrap {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

</style>